{extend name="extra@admin/content"}

{block name="content"}
<form onsubmit="return false;" action="__SELF__" data-auto="true" method="post" class='layui-form' style='padding-top:20px'>

    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <input name="name" value='{$vo.name|default=""}'
                   required="required" title="请输入商品名称" maxlength="50" placeholder="请输入商品名称" class="layui-input ">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">副标题</label>
        <div class="layui-input-block">
            <input name="subtitle" value='{$vo.subtitle|default=""}'
                   required="required" title="请输入副标题" maxlength="50" placeholder="请输入副标题" class="layui-input ">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">商品货号</label>
        <div class="layui-input-block">
            <input name="good_number" value='{$vo.good_number|default=""}' maxlength="50" lay-verify="number" required="required" title="请输入商品名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">基本规格</label>
        <div class="layui-input-block">
            <input name="base_spec" value='{$vo.base_spec|default=""}'
                   required="required" title="请输入商品基本规格" placeholder="请输入商品基本规格" class="layui-input ">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品单位</label>
        <div class="layui-input-block">
            <input name="unit" value='{$vo.unit|default=""}'
                   required="required" title="请输入商品单位" placeholder="请输入商品单位" class="layui-input ">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品分类</label>
        <div class="layui-input-block">
            <select name="cat_id" lay-verify="required" lay-search>
                {volist name='category' id='v'}
                <option value="{$v.id}" {if condition="$vo['cat_id'] eq $v['id']"} selected {/if}>{$v.title}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">扩展分类</label>
        <div class="layui-input-block">
            <select name="exp_cat" lay-verify="required" lay-search>
                {volist name='exp_category' id='v'}
                <option value="{$v.id}" {if condition="$vo['exp_cat'] eq $v['id']"} selected {/if}>{$v.title}</option>
                {/volist}
            </select>
        </div>
    </div>
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">市场价</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input name="price" value='{$vo.price|default=""}'-->
                   <!--required="required" title="请输入市场价" placeholder="请输入市场价" class="layui-input ">-->
        <!--</div>-->
    <!--</div>-->
    <div class="layui-form-item">
        <label class="layui-form-label"> 默认库存</label>
        <div class="layui-input-block">
            <input name="stock" value='{$vo.stock|default=""}'
                   required="required" title="请输入默认库存" placeholder="请输入默认库存" class="layui-input ">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品价格</label>
        <div class="layui-input-block">
            <input name="price" value='{$vo.price|default=""}'
                   required="required" title="请输入商品价格" placeholder="请输入商品价格" class="layui-input ">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员价格</label>
        <div class="layui-input-block">
            <input name="member_price" value='{$vo.member_price|default=""}'
                   required="required" title="请输入会员价格" placeholder="请输入会员价格" class="layui-input ">
            注：仅是会员商品的是时候显示
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品类型</label>
        <div class="layui-input-block">
            {foreach name="level" item="v"}
                <input type="radio"  name="member_level_id" value="{$v.code}" {if condition="$vo.member_level_id eq $v.code"} checked {/if} title="{$v.title}">
            {/foreach}
            <p style="color:red;">注：若是会员商品，请选择对应的会员类型；否则请选择普通会员商品</p>
        </div>
    </div>
    <!-- <div class="layui-form-item">
        <label class="layui-form-label">商品积分</label>
        <div class="layui-input-block">
            <input type="number" name="score" value='{$vo.score|default=""}'
                   required="required" title="请输入商品积分" placeholder="请输入商品积分" class="layui-input ">
        </div>
    </div> -->

    <!-- <div class="layui-form-item">
        <label class="layui-form-label">允许自购</label>
        <div class="layui-input-block">
            <input type="radio"  name="is_zigou" value="0"  title="不允许" {if condition="$vo.is_zigou eq 0"} checked {/if}>
            <input type="radio"  name="is_zigou" value="1"  title="允许" {if condition="$vo.is_zigou eq 1"} checked {/if}>
        </div>
    </div> -->

    <div class="layui-form-item">
        <label class="layui-form-label">是否线上</label>
        <div class="layui-input-block">
            <input type="radio"  name="is_online" value="1"  title="允许" {if condition="$vo.is_online eq 1"} checked {/if}>
            <input type="radio"  name="is_online" value="0"  title="不允许" {if condition="$vo.is_online eq 0"} checked {/if}>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否上架</label>
        <div class="layui-input-block">
            <input type="radio"  name="status" value="1"  title="上架" {if condition="$vo.status eq 1"} checked {/if}>
            <input type="radio"  name="status" value="0"  title="下架" {if condition="$vo.status eq 0"} checked {/if}>
        </div>
    </div>
    <!-- <div class="layui-form-item">
        <label class="layui-form-label">库存状态</label>
        <div class="layui-input-block">
            <input type="radio"  name="is_stock" value="1"  title="有库存" {if condition="$vo.is_stock eq 1"} checked {/if}>
            <input type="radio"  name="is_stock" value="0"  title="无库存" {if condition="$vo.is_stock eq 0"} checked {/if}>
            <input type="text" readonly="readonly" name="message" value='选择该商品是否是库存商品' required="required" 
                   title=""  class="layui-input" style="color:red;border: 0px;">
        </div>
    </div> -->
    <!-- {if condition="!empty($shuxing)"}
    {volist name='shuxing' id='va' key="k"}
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">属性</label>
                <div class="layui-input-inline">
                    <select name="spec_id[]" lay-verify="required" disabled="disabled" >
                        {volist name='spec' id='v1'}
                        <option value="{$v1.id}" {if condition="$va.spec_id eq $v1.id"} selected {/if}>{$v1.name}</option>
                        {/volist}
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="details[]" disabled="disabled" autocomplete="off" required="required" placeholder="请输入属性价格" class="layui-input" value="{$va.detail}">
                </div>
                <input type="hidden" name="s_id[]" value="{$va.id}"> -->
    <!-- <input type="button" onclick="del(this)" data-id="{$va.id}" value="-"> -->
    <!-- </div>
</div>
{/volist}
{/if} -->
    <!-- <div class="layui-form-item" id="add">
        <div class="layui-inline">
            <label class="layui-form-label">添加属性</label>
        <input type="button" lay-filter="add" onclick="tianjia();" value="+" ></button>
        </div>
    </div> -->
    <div class="layui-form-item">
        <label class="layui-form-label">口味</label>
        <div class="layui-input-block">
            <input name="taste" value='{$vo.taste|default=""}'
                   required="required" title="请输入口味" maxlength="50" placeholder="请输入口味" class="layui-input ">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">保存方法</label>
        <div class="layui-input-block">
            <input name="save_method" value='{$vo.save_method|default=""}'
                   required="required" title="请输入保存方法" maxlength="50" placeholder="请输入保存方法" class="layui-input ">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">食用人数</label>
        <div class="layui-input-block">
            <input name="eat_num" value='{$vo.eat_num|default=""}'
                   required="required" title="请输入食用人数" maxlength="50" placeholder="请输入食用人数" class="layui-input ">
        </div>
    </div>


    <!--商品logo  start-->
    <div class="layui-form-item">
        <label class="layui-form-label">展示图片*</label>
            <div class="uploadimage" style="margin-left:1%;">
                <input type="hidden"  name="logo" value="{if condition='!empty($vo.logo)'} {$vo.logo} {/if}" />
            </div>
            <a data-file="one" data-field="logo" data-type="png,jpg,jpeg" data-uptype="qiniu" href="javascript:void(0)"
               class="uploadbutton"><i style="font-size:30px;" class="fa fa-upload" title="点击上传"></i></a>
            {if $vo and !empty($vo.logo)}
            <script>
                $(function(){
                    var img = "{$vo.logo}";
                    require(['jquery'], function () {
                        $('[name="logo"]').parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + img + ')');
                    });
                });
            </script>
            {/if}
            <script>
                require(['jquery'], function () {
                    $('[name="logo"]').on('change', function () {
                        $(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');
                    });
                });
            </script>
    </div>
    <!--商品logo  end-->

    <!--商品轮播图  start-->
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图 *</label>
        <style>
            .upload-option-button {
                float: right;
                background: rgba(0, 0, 0, 0.5);
                color: #fff;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                display: none
            }

            .upload-option-button:hover {
                text-decoration: none;
                color: #fff
            }

            .uploadimagemtl:hover a {
                display: inline-block
            }
        </style>

        {if !empty($vo.images)}
        {volist name='images' id='v'}
        {if $v}
        <div class="uploadimage transition uploadimagemtl" data-tips-image="{$v}"  style="background-image: url('{$v}');">
            <a href="javascript:void(0)" onclick="shanchu(this)" data-pic="{$v}" class="layui-icon upload-option-button">&#x1006;</a>
        </div>
        {/if}
        {/volist}
        {/if}

        <input type='hidden' name='images' value="{$vo.images}"/>

        <a data-file="mut" data-field="images" data-type="png,jpg,jpeg" data-uptype="qiniu" href="javascript:void(0)" style="margin-left:1%;"><i style="font-size:30px;" class="fa fa-upload" title="点击上传"></i></a>

        <script type="text/javascript">
            require(['jquery'], function () {
                var tpl = '<div class="uploadimage transition uploadimagemtl"><a href="javascript:void(0)" class="layui-icon upload-option-button">&#x1006;</a></div>';
                $('[name="images"]').on('change', function () {
                    var input = this, values = [], srcs = this.value.split('|');
                    $(this).prevAll('.uploadimage').map(function () {
                        values.push($(this).attr('data-tips-image'));
                    }), $(this).prevAll('.uploadimage').remove();
                    values.reverse();
                    for (var i in srcs) {
                        values.push(srcs[i]);
                    }
                    this.value = values.join('|');

                    var new_arr = [];
                    for(var i=0;i<values.length;i++) {
                        var items=values[i];
                        //判断元素是否存在于new_arr中，如果不存在则插入到new_arr的最后
                        if($.inArray(items,new_arr)==-1) {
                            new_arr.push(items);
                        }
                    }

                    values = new_arr;

                    for (var i in values) {
                        //此行代码是点击放大图片  -- 去掉
                        var $tpl = $(tpl).attr('data-tips-image', values[i]).css('backgroundImage', 'url(' + values[i] + ')');
                        $tpl.data('input', input).data('srcs', values).data('index', i);
                        $tpl.on('click', 'a', function (e) {
                            e.stopPropagation();
                            var $cur = $(this).parent();
                            $.msg.confirm('确定要移除这张图片吗？', function () {
                                var data = $cur.data('srcs');
                                delete data[$cur.data('index')];
                                $cur.data('input').value = data.join('|');
                                $cur.remove();
                            });
                        });
                        $(this).before($tpl);
                    }
                });
            });
        </script>
    </div>
    <!--商品轮播图  end-->


    <div class="layui-form-item">
        <label class="layui-form-label">商品简介</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入商品简介不超过100个字符" maxlength="200" title="请输入商品简介" class="layui-textarea" name="description">{$vo.description|default=""}</textarea>
        </div>
    </div>
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">上传图片</label>-->
            <!--<div class="uploadimage"><input type="hidden" name="logo" value="{if condition='!empty($vo.logo)'} {$vo.logo} {/if}" /></div>-->
            <!--<a data-file="one" data-field="logo" data-type="png,jpg" data-uptype="qiniu" href="javascript:void(0)"-->
               <!--class="uploadbutton">上传图片</a>-->
            <!--<script>-->
                <!--require(['jquery'], function () {-->
                    <!--$('[name="logo"]').on('change', function () {-->
                        <!--$(this).parent().attr('data-tips-image', this.value).css('backgroundImage', 'url(' + this.value + ')');-->
                    <!--});-->
                <!--});-->
            <!--</script>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">上传图片</label>-->
            <!--<style>-->
                <!--.upload-option-button {-->
                    <!--float: right;-->
                    <!--background: rgba(0, 0, 0, 0.5);-->
                    <!--color: #fff;-->
                    <!--width: 20px;-->
                    <!--height: 20px;-->
                    <!--line-height: 20px;-->
                    <!--text-align: center;-->
                    <!--display: none-->
                <!--}-->

                <!--.upload-option-button:hover {-->
                    <!--text-decoration: none;-->
                    <!--color: #fff-->
                <!--}-->

                <!--.uploadimagemtl:hover a {-->
                    <!--display: inline-block-->
                <!--}-->
            <!--</style>-->
            <!--<input type='hidden' name='images' value="{if condition='!empty($vo.images)'} {$vo.images} {/if}"/>-->
            <!--<a data-file="mut" data-field="images" data-type="png,jpg" data-uptype="qiniu" href="javascript:void(0)">上传图片</a>-->
            <!--<script type="text/javascript">-->
                <!--require(['jquery'], function () {-->
                    <!--var tpl = '<div class="uploadimage transition uploadimagemtl"><a href="javascript:void(0)" class="layui-icon upload-option-button">&#x1006;</a></div>';-->
                    <!--$('[name="images"]').on('change', function () {-->
                        <!--var input = this, values = [], srcs = this.value.split('|');-->
                        <!--$(this).prevAll('.uploadimage').map(function () {-->
                            <!--values.push($(this).attr('data-tips-image'));-->
                        <!--}), $(this).prevAll('.uploadimage').remove();-->
                        <!--values.reverse();-->
                        <!--for (var i in srcs) {-->
                            <!--values.push(srcs[i]);-->
                        <!--}-->
                        <!--this.value = values.join('|');-->
                        <!--for (var i in values) {-->
                            <!--var $tpl = $(tpl).attr('data-tips-image', values[i]).css('backgroundImage', 'url(' + values[i] + ')');-->
                            <!--$tpl.data('input', input).data('srcs', values).data('index', i);-->
                            <!--$tpl.on('click', 'a', function (e) {-->
                                <!--e.stopPropagation();-->
                                <!--var $cur = $(this).parent();-->
                                <!--$.msg.confirm('确定要移除这张图片吗？', function () {-->
                                    <!--var data = $cur.data('srcs');-->
                                    <!--delete data[$cur.data('index')];-->
                                    <!--$cur.data('input').value = data.join('|');-->
                                    <!--$cur.remove();-->
                                <!--});-->
                            <!--});-->
                            <!--$(this).before($tpl);-->
                        <!--}-->
                    <!--});-->
                <!--});-->
            <!--</script>-->
    <!--</div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">商品详情</label>
        <div class="layui-input-block">
            <textarea name="detail">{$vo.detail}</textarea>
            <script type="text/javascript">
            require(['ckeditor'], function () {
                var editor = window.createEditor('[name="detail"]');
                // 设置内容
                // editor.setData('修改内容');
                // 获取内容
                var content = editor.getData();
                console.log(content);
            });
            </script>
            <script>
                layui.use('code', function () {
                    layui.code({encode: true});
                });
            </script>
        </div>
    </div>
    <div class="hr-line-dashed"></div>
    <div class="col-sm-4 col-sm-offset-2">
        <input type='hidden' value='{$vo.id}' name='id'/>
        <div class="layui-form-item text-center">
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>
    <script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;      //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();

    });
    function tianjia(){
        var ht = '<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">属性</label><div class="layui-input-inline"><select name="spec_id[]" lay-verify="required" lay-search>{volist name="spec" id="v1"}<option value="{$v1.id}" >{$v1.name}</option>{/volist}</select></div><div class="layui-input-inline" style="width: 100px;"><input type="text" name="price[]" required="required" placeholder="请输入属性价格" autocomplete="off" class="layui-input"></div></div><button onclick="reduce(this)">-</button></div>';
        var html = ht;
        // var html = '<div class="layui-form-item">'+ht+'</div>';
        // alert(html);
        $("#add").before(html);
        window.form.render('select'); //刷新select选择框渲染
    }
    /**
     * 移除属性元素
     * @param  {[type]} obj [description]
     * @return {[type]}     [description]
     */
    function reduce(obj){
        $(obj).parent().remove();
    }
    /**
     * 删除属性记录
     * @param  {[type]} obj [description]
     * @return {[type]}     [description]
     */
    function del(obj){
        var id = $(obj).attr('data-id');
        $.post('{:url("Goods/del_spec")}',
            {id:id},
            function(data){
                if(data.code == 1){
                    $(obj).parent().remove();
                }
            });
    }

    function shanchu(obj){
        $.msg.confirm('确定要移除这张图片吗？', function () {
            var pic = $(obj).attr('data-pic');      //删除的图片
            var id = $('input[name=id]').val();
            console.log(pic);

            var images = $('input[name=images]').val();
            var arr = images.split('|');
            var index = $.inArray(pic,arr);
            console.log(index);
            arr.splice(index,1);
            var va= arr.join('|');
            console.log(va);
            $.post("{:url('del_pic')}",
                {id:id,images:va},
                function(data){
                    if(data.code == 1){
                        $('input[name=images]').val(va);
                        $(obj).parent().remove();
                    }else{
                        layer.msg('删除失败',function(){
                            // $('#create').empty();       //清空元素内部元素
                        });
                    }
                }
            );
        });
    }

</script>
</form>

{/block}